<template>
  <div class="my-container">
    <van-cell-group v-if="user" class="my-info">     
      <van-cell
      class="base-info"
      center
      :border="false"
      >
      <van-image
      class="avatar"
      slot="icon"
      round
      fit="cover"
      :src="currentUser.photo"
      />
      <div class="name" slot="title">{{ currentUser.name }}</div>
      <van-button
      class="update-btn"
      size="small"
      round
      >编辑资料</van-button>
      </van-cell>
      <van-grid
      :border="false"
      >
        <van-grid-item class="data-info-item">
          <div slot="text">
            <div class="count">{{ currentUser.art_count }}</div>
            <div class="text">头条</div>
          </div>
        </van-grid-item>
        <van-grid-item class="data-info-item">
          <div slot="text">
            <div class="count">{{ currentUser.follow_count }}</div>
            <div class="text">关注</div>
          </div>
        </van-grid-item>
        <van-grid-item class="data-info-item">
          <div slot="text">
            <div class="count">{{ currentUser.fans_count }}</div>
            <div class="text">粉丝</div>
          </div>
        </van-grid-item>
        <van-grid-item class="data-info-item">
          <div slot="text">
            <div class="count">{{ currentUser.like_count }}</div>
            <div class="text">获赞</div>
          </div>
        </van-grid-item>
      </van-grid>
    </van-cell-group>
    <div v-else class="not-login">
      <div @click="$router.push('/login')">
        <img class="mobile" src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="">
      </div>
      <div class="text">登录 / 注册</div>
    </div>
    <van-grid
    class="nav-grid mb-4"
      :column-num="2"
      :border="false"
      >
        <van-grid-item
        class="nav-grid-item" 
        icon-prefix="toutiao" 
        icon="shoucang" 
        text="收藏" />
        <van-grid-item
        class="nav-grid-item"
        icon-prefix="toutiao" 
        icon="lishi" 
        text="历史" />
      </van-grid>
      <!-- is-link 是右箭头 -->
      <!-- 这里的 user 用的是容器里的 user 这里的数据也是响应式的 -->
      <van-cell
      v-if="user"
      title="消息通知"
      :border="false"
      is-link to="/"/>
      <van-cell 
      class="mb-4"
      title="小智同学" is-link to="/"/>
      <van-cell
      v-if="user"
      class="logout-cell"
      @click.prevent="onLogout"
      title="退出登录"/>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import { getCurrentUser } from '@/api/user'
  export  default  {
    name: 'MyIndex',
    // data 里面的数据不能和 store 里面的数据名字重复,要不然就会报错
    data() {
      return {
        // 当前登录用户信息
        currentUser: {}
      }
    },
    // 计算属性,不改变就不会重新计算
    computed: {
      // 获取到 vuex 中的user,看看有无登录,并且映射到本地组件中
      ...mapState(['user'])
    },
    // created 不建议写逻辑 
    mounted () {
      // 加载登录用户信息
      this.loadCurrentUser()
    },
    methods: {
      async loadCurrentUser () {
        const { data } = await getCurrentUser()
        this.currentUser = data.data
        console.log('data:',data);
      },
      onLogout () {
        // 提示用户确认退出
        // 确认就处理退出
        // 取消就什么也不做
        this.$dialog.confirm({
          title: '退出提示',
          message: '确认要退出吗?',
        })
        .then(() => {
          // 把 user 设置为null, 如果只放到本地存储,是没有响应式这种效果的
          this.$store.commit('setUser', null)
        })
        .catch(() => {
          // on cancel
        });
      }
    },
    created () {

    }
  }
</script>
<style >
.my-container .my-info {
  background: url("./backgroung.jpg") no-repeat;
  background-size: cover;
}
.my-container .not-login {
  height: 180px;
  background: url("./backgroung.jpg") no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.not-login .mobile {
  width: 66px;
  height: 66px;
  border: 1px solid #fff;
  border-radius: 50%;
}
.not-login .text {
  color: #fff;
  font-size: 14px;
}
.my-info .base-info {
  box-sizing: border-box;
  height: 115px;
  background: unset;
  padding-top: 38px;
  padding-bottom: 11px;

}
.base-info .avatar {
  box-sizing: border-box;
  width: 66px;
  height: 66px;
  border: 1px solid #fff;
  margin-right: 11px;
}
.base-info .name {
  font-size: 15px;
  color: #fff;
}
.base-info .update-btn {
  height: 16px;
  font-size: 10px;
  color: #666;
}
.my-info .van-grid-item__content {
  background: unset;
  color: #fff;
}
.data-info .data-info-item{
  height: 65px;
}
.data-info-item .count {
  font-size: 18px;
  text-align: center;
}
.data-info-item .text {
  font-size: 11px;
  text-align: center;
}
.nav-grid .nav-grid-item {
  height: 70px;
}
.nav-grid-item .toutiao {
  font-size: 22px;
}
.nav-grid-item .toutiao-shoucang {
  color: #eb5253;
}
.nav-grid-item .toutiao-lishi {
  color: #ff9d1d;
}
.van-grid .van-grid-item__text {
  font-size: 14px;
  color: #333333;
}
.logout-cell {
  text-align: center;
  color: #d86262;
}
.mb-4 {
  margin-bottom: 4px;
}
</style>